<template>
  <ul
  v-infinite-scroll="loadMore"
  infinite-scroll-disabled="false"
  infinite-scroll-distance="5">
  <li v-for="(img,index) in listImgs" :key="index" @click="minejunp(img.id)">
    <img :src="img.image" :alt="img.name" v-if="img.title" class="imgshop">
    <img :src="img.image" :alt="img.name" v-else class="imgshops">
    <p v-if="img.title">{{img.title}}</p>
    <div v-if="img.title" class="ShopPrice">￥{{img.price}}<span>找相似</span></div>
    </li>
</ul>
</template>

<script>

export default {

  data () {
    return {
      listImgs: [],
      start: -20,
      flag: 0

    }
  },
  methods: {
    minejunp (id) {
      this.$router.push({
        name: 'product',
        params: {
          id
        }
      })
    },
    loadMore () {
      this.loading = true
      if (this.start < 2732) {
        setTimeout(() => {
          this.start += 20

          this.$http.getHomeShop(this.start)
            .then(res => {
              if (res.data.code === 200) {
              // for (var i = 0; i < 2; i++) {
              //    this.listImgs = this.listImgs.concat(res.data.data.list)
              //   starts += 20
              // }
                this.listImgs = this.listImgs.concat(res.data.data.list)
                // this.listImgs = res.data.data.list
              }
            }).then(res => {
              this.loading = false
            })
        }, 50)
      }
    }
  }

}

</script>

<style scoped>
  ul{
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap;
    list-style: none;
    background-color: #ccc;

  }
  li{
    width: 49.6%;
    height: 51vw;
    margin-bottom: .5vw;
    background: #fff;
  }
  .imgshop{
    width: 100%;
    height: 34vw;
    padding-top:1vw;
  }
   .imgshops{
    width: 100%;
    height: 100%;
    /* padding-top:1vw; */
  }
  p{
    font-size: 12px;
    width: 95%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .ShopPrice{
    color: red;
    width: 95%;
  }
  .ShopPrice span{
    color: #0a1a1a;
    font-size: 12px;
    display: inline-block;
    border: 1px solid #9c9c9c
  }
</style>
